<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域scope</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div id="myApp01" ng-app="myApp01" ng-controller="myCtrl01">
        <h1>{{carname}}</h1>
    </div>
    <div id="myApp02" ng-app="myApp02" ng-controller="myCtrl02">
        <input ng-model="carname">
        {{carname}}
    </div>
    <div id="myApp03" ng-app="myApp03" ng-controller="myCtrl03">
        <input ng-model="lastname">
        {{lastname}}
        <ul>
            <li ng-repeat="x in names">{{x}} {{lastname}}</li>
        </ul>
    </div>
    <div id="myApp04" ng-app="myApp04">
        <ul>
            <li ng-repeat="x in names">{{x}} {{lastname}}</li>
        </ul>
    </div>
<script>
    var app01=angular.module('myApp01',[]);
    app01.controller('myCtrl01',function ($scope) {
        $scope.carname="Volvo";
    });
    var app02=angular.module('myApp02',[]);
    app02.controller('myCtrl02',function ($scope) {
        $scope.carname="Lily";
    });
    var app03=angular.module('myApp03',[]);
    app03.controller('myCtrl03', function($scope, $rootScope) {
        $scope.names = ["Emil", "Tobias", "Linus"];
        $rootScope.lastname = "Refsnes";
    });
    var app04=angular.module('myApp04',[]);
    angular.bootstrap(document.getElementById("myApp02"), ['myApp02']);
    angular.bootstrap(document.getElementById("myApp03"), ['myApp03']);
    angular.bootstrap(document.getElementById("myApp04"), ['myApp04']);
</script>

</body>
</html>